<div
  class="cell"
  nz-popover
  [nzPopoverContent]="contentTemplate"
  nzPopoverPlacement="bottomCenter"
>
  <i *ngFor="let mat of icons" nz-icon [nzType]="mat"></i>
  <ng-template #contentTemplate>
    <strong
      ><span class="monospace"># {{ cell.index + 1 }}</span></strong
    >
    <ul class="list-unstyled">
      <li>
        <i nz-icon nzType="my:strafe"></i>
        Strength:
        <span class="monospace">
          {{ cell.enemyStrength | percent }}
        </span>
      </li>
      <li
        *ngFor="let mat of cell.materials"
        [ngClass]="mat.material.colorClass"
      >
        <i nz-icon [nzType]="mat.material.icon" class="matIcon"></i>
        <span class="monospace">{{ mat.quantity | format }}</span>
      </li>
    </ul>
  </ng-template>
</div>
